<template>
  <div>
    <el-card style="min-width: 1200px">
      <div class="tableSelectWrap">
        <el-form
          ref="caseAccountRulesForm"
          :model="commandForm"
          label-width="100px"
          style="margin-bottom: -15px"
        >
          <el-row>
            <el-col :span="7">
              <el-form-item label="分润模式" prop="separateType">
                <el-select
                  v-model="commandForm.separateType"
                  style="width: 100%"
                  placeholder="请选择分润模式"
                >
                  <el-option label="所有" value=""></el-option>
                  <el-option label="按百分比" value="1"></el-option>
                  <el-option label="按固定金额" value="2"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="7" :offset="1">
              <el-form-item label="模板名称" prop="ruleName">
                <el-input
                  v-model="commandForm.ruleName"
                  placeholder="请输入模板名称"
                  maxlength="30"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="7" :offset="1">
              <el-form-item label="规则状态" prop="ruleStatus">
                <el-select
                  v-model="commandForm.ruleStatus"
                  style="width: 100%"
                  placeholder="请选择状态"
                >
                  <el-option label="所有" value=""></el-option>
                  <el-option label="有效" value="Y"></el-option>
                  <el-option label="无效" value="N"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <!-- <el-col :span="7">
              <el-form-item label="分润时效" prop="payMode">
                <el-select
                  v-model="commandForm.payMode"
                  style="width: 100%"
                  placeholder="请选择"
                >
                  <el-option label="所有" value=""></el-option>
                  <el-option label="延时分润" value="delay"></el-option>
                  <el-option label="实时分润" value="real"></el-option>
                </el-select>
              </el-form-item>
            </el-col> -->
            <el-col :span="7" style="min-width: 170px">
              <el-form-item>
                <el-button
                  class="width120"
                  style="margin-left: -80px"
                  @click="resetForm('caseAccountRulesForm')"
                  >重置</el-button
                >
                <el-button
                  type="primary"
                  class="width120"
                  @click="
                    () => {
                      this.dataForm = JSON.parse(
                        JSON.stringify(this.commandForm)
                      );
                      this.handleQuery();
                    }
                  "
                  >查询</el-button
                >
              </el-form-item>
            </el-col>
            <el-col :span="3" :offset="13">
              <el-button @click="createRule" type="primary" style="width: 100%"
                >创建分润规则</el-button
              >
            </el-col>
          </el-row>
        </el-form>
      </div>
    </el-card>
    <el-card style="margin-top: 15px; min-width: 1200px">
      <el-table :data="dataList">
        <template slot="empty">
          <el-empty
            :image="require('@/assets/imgs/middleWork/k1.png')"
            :image-size="80"
            description="暂无相关数据"
          ></el-empty>
        </template>
        <el-table-column
          show-overflow-tooltip
          prop="gmtCreated"
          width="180"
          align="center"
          label="创建时间"
        >
          <template slot-scope="scope">
            <div>
              {{ $moment(scope.row.gmtCreated).format("YYYY-MM-DD HH:mm:ss") }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="ruleName"
          align="center"
          label="模板名称"
        >
          <template slot-scope="scope">
            <div
              style="
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
              "
            >
              {{ scope.row.ruleName ? scope.row.ruleName : "-" }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="id"
          width="340"
          align="center"
          label="模板ID"
        >
          <template slot-scope="scope">
            <div
              style="
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
              "
            >
              {{ scope.row.id ? scope.row.id : "-" }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="separateType"
          align="center"
          label="分润模式"
        >
          <template slot-scope="scope">
            <div
              style="
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
              "
            >
              {{ scope.row.separateType === 1 ? "按百分比" : "按固定金额" }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="accountRulesInfoListValue"
          align="center"
          label="分润详情"
        >
          <template slot-scope="scope">
            <div
              style="
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
              "
            >
              {{
                scope.row.accountRulesInfoListValue
                  ? scope.row.accountRulesInfoListValue
                  : "-"
              }}
            </div>
          </template>
        </el-table-column>
        <!-- <el-table-column show-overflow-tooltip prop="address" align="center" label="分润返回设置">
        </el-table-column> -->
        <!-- <el-table-column show-overflow-tooltip prop="ruleStatus" align="center" label="状态">
          <template slot-scope="scope">{{scope.row.ruleStatus === 'Y' ? '有效' : '无效'}}</template>
        </el-table-column> -->
        <!-- <el-table-column
          show-overflow-tooltip
          prop="payMode"
          align="center"
          label="分润时效"
        >
          <template slot-scope="scope">{{
            scope.row.payMode === "delay" ? "延时分润" : "实时分润"
          }}</template>
        </el-table-column> -->
        <el-table-column
          show-overflow-tooltip
          prop="act"
          align="center"
          label="操作"
        >
          <template slot-scope="scope">
            <span v-if="!$store.state.testLine">
              <el-button @click="handleEdit(scope.row.id)" type="text"
                >详情</el-button
              >
              <el-button
                @click="
                  codeHandleStopDel(scope.row, 'SMS_BUSINESS_STOP_SETTLE_RULE')
                "
                type="text"
                v-if="scope.row.ruleStatus !== 'Y'"
                >启用</el-button
              >
              <el-button
                @click="
                  codeHandleStopDel(scope.row, 'SMS_BUSINESS_STOP_SETTLE_RULE')
                "
                type="text"
                v-if="scope.row.ruleStatus === 'Y'"
                >停用</el-button
              >
              <el-button
                @click="
                  codeHandleStopDel(
                    scope.row,
                    'SMS_BUSINESS_DELETE_SETTLE_RULE'
                  )
                "
                type="text"
                >删除</el-button
              >
            </span>
            <span v-else>
              <el-button @click="handleEdit(scope.row.id)" type="text"
                >详情</el-button
              >
              <el-button
                @click="handleStopDel(scope.row, 1)"
                type="text"
                v-if="scope.row.ruleStatus !== 'Y'"
                >启用</el-button
              >
              <el-button
                @click="handleStopDel(scope.row, 1)"
                type="text"
                v-if="scope.row.ruleStatus === 'Y'"
                >停用</el-button
              >
              <el-button @click="handleStopDel(scope.row, 2)" type="text"
                >删除</el-button
              >
            </span>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <el-pagination
      layout="prev, pager, next, sizes, jumper"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="pageSize"
      :current-page="pageNum"
      :total="total"
      @current-change="pageCurrentChangeHandle"
      @size-change="pageSizeChangeHandle"
    >
    </el-pagination>

    <el-dialog
      class="cardDialog"
      :show-close="false"
      :visible="connectDia"
      width="500px"
      top="15vh"
    >
      <div class="addTitle">
        <span>提示</span>
      </div>
      <div class="tip">
        当前分润规则关联正在使用的收款二维码，是否确认{{
          this.commandType == 1 ? "停用" : "刪除"
        }}?
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cencelReset">取消</el-button>
        <el-button type="primary" @click="handleSubmit">确定</el-button>
      </div>
    </el-dialog>
    <codeDialogVue
      codeId="1"
      :type="codeType"
      :codeDialog.sync="codeDialog"
      @codeState="codeStateFn"
    />
  </div>
</template>

<script>
import codeDialogVue from "@/components/codeDialog.vue";
import { getUserInfo } from "@/utils/public";
import mixin from "@/mixins/mixin";
export default {
  mixins: [mixin],
  name: "caseAccountRules",
  components: {
    codeDialogVue,
  },
  data() {
    return {
      codeItem: null,
      codeType: "",
      codeDialog: false,
      mixinViewModuleOptions: {
        getDataListURL: "/api/settle/rules/searchByPage",
        deleteURL: "/api/settle/rules/delete",
        createdIsNeed: false,
      },
      commandForm: {
        ruleName: "",
        separateType: "",
        ruleStatus: "",
        payMode: "",
      },
      connectDia: false,
      currentRow: {},
      commandType: 1,
    };
  },
  created() {
    this.dataForm = JSON.parse(JSON.stringify(this.commandForm));
    this.$store.dispatch("getTree");
    this.handleQuery();
  },
  watch: {
    "$store.state.testLine": {
      handler() {
        if (this.$route.name == this.$options.name) {
          this.getDataList();
        }
      },
    },
    // $route(to, from) {
    //   console.log(from.path);
    //   if (from.path == "/caseAccount/createRules" || from.path == "/caseAccount/rules/edit") {
    //     this.commandForm = {
    //       ruleName: "",
    //       separateType: "",
    //       ruleStatus: "",
    //       payMode: "",
    //     };
    //     this.getDataList();
    //   }
    // },
    deep: true,
  },
  methods: {
    getUserInfo,
    handleQuery() {
      this.getDataList();
    },
    codeStateFn(val) {
      if (val) {
        if (this.codeType == "SMS_BUSINESS_STOP_SETTLE_RULE") {
          this.handleStopDel(this.codeItem, 1);
        } else if (this.codeType == "SMS_BUSINESS_DELETE_SETTLE_RULE") {
          this.handleStopDel(this.codeItem, 2);
        }
      }
    },
    cencelReset() {
      this.connectDia = false;
      this.currentRow = {};
      this.commandType = 1;
    },
    handleSubmit() {
      this.connectDia = false;
      this.handleUse(this.currentRow, this.commandType);
    },
    handleEdit(id) {
      this.$router.push({ path: "/caseAccount/rules/info", query: { id } });
    },
    createRule() {
      this.$router.push({ path: "/caseAccount/createRules" });
    },
    codeHandleStopDel(val, type) {
      if (getUserInfo().checkFlag) {
        if (type == "SMS_BUSINESS_STOP_SETTLE_RULE") {
          this.handleStopDel(val, 1);
        } else if (type == "SMS_BUSINESS_DELETE_SETTLE_RULE") {
          this.handleStopDel(val, 2);
        }
      } else {
        this.codeDialog = true;
        this.codeItem = val;
        this.codeType = type;
      }
    },
    handleStopDel(row, type) {
      if (row.ruleStatus == "Y" || type !== 1) {
        //停用或删除操作 - 验证是否关联二维码
        // var params = new FormData();
        // params.append("id", row.id);
        let params = {
          id: row.id,
        };
        this.$http.post("/api/settle/rules/check", params).then((res) => {
          if (res.code === "0000") {
            if (res.data) {
              //打开关联弹窗
              this.connectDia = true;
              this.currentRow = row;
              this.commandType = type;
            } else {
              this.handleUse(row, type);
            }
          }
        });
      } else {
        // 启用
        this.handleUse(row, type);
      }
    },
    handleUse(row, type) {
      if (type == 1) {
        //停用/啓用
        // var params = new FormData();
        // params.append("id", row.id);
        // params.append("ruleStatus", row.ruleStatus === "Y" ? "N" : "Y");
        let params = {
          id: row.id,
          ruleStatus: row.ruleStatus === "Y" ? "N" : "Y",
        };
        this.$http.post("/api/settle/rules/set", params).then((res) => {
          if (res.code === "0000") {
            this.$message.success(
              `${row.ruleStatus === "Y" ? "停用" : "启用"}成功！`
            );
            this.query();
          }
        });
      } else {
        //刪除
        this.deleteHandle(row.id, "确定删除吗");
      }
    },
  },
};
</script>

<style scoped lang="scss">
.cardDialog {
  .addTitle {
    font-size: 20px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: bold;
    color: rgba(0, 0, 0, 0.85);
  }
  .tip {
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.65);
    margin-top: 12px;
    margin-bottom: 30px;
    &.tip1 {
      margin-bottom: 12px;
    }
    a {
      text-decoration: none;
      font-size: 12px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #869daa;
    }
  }
  :deep(.el-dialog) {
    border-radius: 16px;
  }
  :deep(.el-dialog__body) {
    padding: 10px 40px;
    padding-bottom: 60px;
  }
  :deep(.el-button--small) {
    width: 74px;
  }
  // :deep(.el-input__inner) {
  //   padding-left: 40px;
  // }
  :deep(.el-form-item__content) {
    position: relative;
  }
  .form-img {
    width: 22px;
    border-radius: 22px;
    position: absolute;
    top: 5px;
    left: 10px;
    z-index: 1;
  }
}
</style>
